<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温馨输入助手</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">温馨输入助手</div>
            <div class="controls">
                <button class="btn minimize">─</button>
                <button class="btn maximize">□</button>
                <button class="btn close">✕</button>
            </div>
        </div>

        <div class="input-area">
            <div class="input-container">
                <textarea class="text-input" placeholder="在这里输入文本，按回车生成标签..." id="mainInput"></textarea>
            </div>

            <div class="candidate-panel" id="candidatePanel">
                <div class="candidate-list">
                    <div class="candidate-item active">1. 天气</div>
                    <div class="candidate-item">2. 添加</div>
                    <div class="candidate-item">3. 田地</div>
                    <div class="candidate-item">4. 甜甜</div>
                    <div class="candidate-item">5. 填写</div>
                </div>
                <div class="page-nav">
                    <span class="page-info">1/5</span>
                    <button class="page-btn prev">‹</button>
                    <button class="page-btn next">›</button>
                </div>
            </div>
        </div>

        <div class="tags-container" id="tagsContainer">
            <div class="tags-header">
                <span class="tags-title">标签列表</span>
                <div class="tags-controls">
                    <button class="clear-tags-btn" id="clearTagsBtn" title="清除所有标签">
                        🗑️ 清除全部
                    </button>
                    <button class="warm-tip-btn" id="warmTipBtn" title="温馨提示">
                        💝 温馨提示
                    </button>
                    <button class="rainbow-btn" id="rainbowBtn" title="随机弹窗">
                        🎲 随机弹窗
                    </button>
                </div>
            </div>
            <div class="tags-list" id="tagsList">
                <!-- 标签将动态添加到这里 -->
            </div>
        </div>

        <div class="status-bar">
            <div class="status-item">
                <span class="status-label">输入法:</span>
                <span class="status-value">拼音</span>
            </div>
            <div class="status-item">
                <span class="status-label">字数:</span>
                <span class="status-value" id="charCount">42</span>
            </div>
            <div class="status-item">
                <span class="status-label">编码:</span>
                <span class="status-value" id="pinyinInput">tq</span>
            </div>
        </div>

        <div class="toolbar">
            <button class="tool-btn" title="剪切">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M6 3h2v2H6V3zm0 3h2v2H6V6zm0 3h2v2H6V9z"/>
                </svg>
            </button>
            <button class="tool-btn" title="复制">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M3 2h10v12H3V2zm1 1v10h8V3H4z"/>
                </svg>
            </button>
            <button class="tool-btn" title="粘贴">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M11 1v2h1v11H4V3h1V1H2v14h12V1h-3z"/>
                </svg>
            </button>
            <div class="separator"></div>
            <button class="tool-btn" title="清空">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M8 2l1 1v9l-1 1-1-1V3l1-1z"/>
                    <path d="M3 6h10v4H3V6z"/>
                </svg>
            </button>
            <button class="tool-btn" title="设置">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 1a6 6 0 110 12A6 6 0 018 2z"/>
                    <circle cx="8" cy="8" r="2"/>
                </svg>
            </button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>